<template>
  <div>
    <div class="header" style="margin-bottom: 20px">
      <a-button type="primary" icon="plus" @click="add_banner"
        >新增图片</a-button
      >
    </div>
    <a-table
      :columns="columns"
      :data-source="rows"
      :scroll="{ x: 1500, y: 300 }"
      :rowKey="(record) => record.id"
    >
      <!-- <span slot="img" slot-scope="record">{{ banner_img(record) }}</span> -->
      <span slot="img" slot-scope="record">
        <img :src="banner_img(record)" alt="" />
      </span>
      <a-space
        size="8"
        slot="action"
        slot-scope="text, record"
        style="display: flex; justify-content: space-between"
      >
        <a-button type="danger" slot="action" @click="remove(record)">
          删除
        </a-button>
      </a-space>

      <a slot="action"></a>
    </a-table>

    <div class="popup" v-show="refuse_popup">
      <p class="title">是否删除？</p>
      <div class="buttons">
        <a-button type="danger" slot="action" @click="cancel()">
          <a-icon type="exclamation" />
          取消
        </a-button>
        <a-button type="primary" slot="action" @click="remove_confirm()">
          <a-icon type="check" />
          确定
        </a-button>
      </div>
    </div>
  </div>
</template>
<script>
const columns = [
  { title: "ID", dataIndex: "id", key: "id", width: 80 },
  {
    title: "上传时间",
    dataIndex: "creationDate",
    key: "creationDate",
    width: 200,
  },
  {
    title: "图片",
    dataIndex: "image",
    key: "image",
    scopedSlots: { customRender: "img" },
  },
  {
    title: "操作",
    dataIndex: "action",
    key: "action",
    fixed: "right",
    width: 180,
    scopedSlots: { customRender: "action" },
  },
];

const data = [];
for (let i = 0; i < 100; i++) {
  data.push({
    key: i,
    name: `Edrward ${i}`,
    age: 32,
    address: `London Park no. ${i}`,
  });
}

import { mapState, createNamespacedHelpers } from "vuex";
const { mapActions } = createNamespacedHelpers("money");
import http from "@/utils/global";
export default {
  data() {
    return {
      data,
      columns,
      refuse_popup: false,
      http: http,
    };
  },
  computed: {
    ...mapState({
      rows: (state) => state.banner.rows,
      total: (state) => state.banner.total,
    }),
  },
  created() {
    this.getList();
  },
  methods: {
    ...mapActions(["audit"]),
    getList() {
      this.$store.dispatch("banner/getBannerList");
    },
    remove(item) {
      this.refuse_popup = !this.refuse_popup;
      this.info = item;
    },
    cancel() {
      this.agree_popup = false;
      this.refuse_popup = false;
    },
    refresh(index) {
      this.$store.commit("money/changeState", index);
      this.getList();
    },
    async remove_confirm() {
      //   let result = {
      //     id: this.info.id,
      //     status: 2,
      //   };
      this.refuse_popup = !this.refuse_popup;
      //   this.$store.commit("money/modify", result);
      //   const success = await this.audit();
      //   if (success) {
      //     this.$message.success("成功");
      //     this.getList();
      //   } else {
      //     this.$message.error("失败");
      //   }
      console.log("删除没做完");
    },
    async add_banner() {
      //   let result = {
      //     id: this.info.id,
      //     status: 1,
      //   };
      //   this.agree_popup = !this.agree_popup;
      //   this.$store.commit("money/modify", result);
      //   const success = await this.audit();
      //   if (success) {
      //     this.$message.success("成功");
      //     this.getList();
      //   } else {
      //     this.$message.error("失败");
      //   }
    },
    banner_img(img) {
      console.log(img, "banner");
      let url = `${this.http.httpUrlFile}?file=${img}`;
      // let url = `${http.httpUrlFile}?file=${img}`
      // let url = "data:image/png;base64," + img;
      console.log(url);
      return url;
    },
  },
};
</script>

<style>
.popup {
  border-radius: 15px;
  background-clip: padding-box;
  width: 300px;
  height: 150px;
  padding: 15px 35px 15px 35px;
  background: #fefefe;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.buttons {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.title {
  text-align: center;
  margin-top: 20px;
}
</style>
